<!-- 视频号发布——成功后调用展示二维码 -->
<template>
  <div>
    <ele-modal
      class="el-model-class"
      :show-close="false"
      width="400px"
      :visible="visible"
      :append-to-body="true"
      :close-on-click-modal="true"
      custom-class="ele-dialog-form"
      @close="updateVisible(false)"
    >
      <div class="code-cls">
        <div class="title">请使用微信扫码</div>
        <!--二维码加载与显示-->
        <span v-if="!codeImg" class="v-be-overdue flex"><i class="el-icon-loading"></i>&nbsp;加载中...</span>
        <div class="relative" id="qrcode" ref="qrCodeUrl" v-else></div>
        <div class="v-be-overdue flex" v-if="isError" @click="repeatCode">
          <i class="el-icon-refresh-right"></i>
          <div>二维码异常</div>
          <div>点击重新加载</div>
        </div>
        <div class="v-be-overdue flex" v-if="isSuccess">
          <i class="el-icon-success" style="color:#67C23A;"></i>
          <div>扫码成功</div>
        </div>
      </div>
    </ele-modal>
  </div>
</template>

<script>
  import QRCode from "qrcodejs2";
  import {csApi,sphQrStatus} from "@/api/creatCenter/material";
  export default {
    name: "index",
    data(){
      return{
        codeImg:'',
        visible: false,
        isSuccess: false,
        isError: false,
      }
    },
    methods:{
      repeatCode(){
        this.codeImg=''
        this.isSuccess = false
        this.isError = false
        this.getCode()
      },
      show(){
        this.visible = true;
        this.getCode()
      },
      getCode(){
        csApi()
          .then((data) => {
            console.log('data======',data)
            this.codeImg=data.code_url
            console.log('this.codeImg======', this.codeImg)
            this.$nextTick(function () {
              this.creatQrCode(this.codeImg);
            })
            this.statusClick(data.token)
          })
          .catch((e) => {
            console.log("进入错误")
            this.$message.error(e);
          });
      },
      creatQrCode(codeImg) {
        var qrcode = new QRCode(this.$refs.qrCodeUrl, {
          text: codeImg, // 需要转换为二维码的内容
          width: 180,
          height: 180,
          colorDark: '#333', // 二维码颜色
          colorLight: '#fff', // 二维码背景颜色
          correctLevel: QRCode.CorrectLevel.H //容错率,L/M/H
        })
      },
      // 校检二维码
      statusClick(token){
        console.log("进入调用接口========")
        let timer = setInterval(() => {
          sphQrStatus(token)
            .then((data) =>
            {
              console.log("data=======",data)
              // status=1 & acctStatus=1 代表授权成功，反则失败
              if (data.data.status === 1 && data.data.acctStatus==1) {
                console.log('成功111',data.data)
                this.isSuccess = true
                this.$emit('success',data.data.cookie)
                // 成功后 会关闭二维码弹框
                clearInterval(timer);
                setTimeout(()=>{
                  this.updateVisible(false)
                  this.codeImg=''
                },500)
              }
              // 修改,判断二维码错误 acctStatus==1 代表已扫描
              if(data.data.acctStatus==1) {
                clearInterval(timer);
                let csTimer = setInterval(() => {
                  sphQrStatus(token)
                    .then((data) =>
                    {
                      console.log("调用csTimer==data=======",data)
                      // status=1 & acctStatus=1 代表授权成功，反则失败
                      if (data.data.status === 1 && data.data.acctStatus==1) {
                        console.log('成功111',data.data)
                        this.isSuccess = true
                        this.$emit('success',data.data.cookie)
                        // 成功后 会关闭二维码弹框
                        clearInterval(csTimer);
                        setTimeout(()=>{
                          this.updateVisible(false)
                          this.codeImg=''
                        },500)
                      }
                      else{
                        console.log('失败2222',data.data)
                        this.isError = true
                        clearInterval(csTimer);
                      }
                    })
                    .catch((e) => {
                      this.$message.error(e);
                    });
                },3000)
              }
              // old 判断二维码错误 acctStatus==1 代表已扫描，status==1代表扫描状态成功。超过一分钟则需要关闭二维码弹框
              /*if(data.data.status != 1 && data.data.acctStatus==1) {
                console.log('失败2222',data.data)
                this.isError = true
                clearInterval(timer);
              }*/
            })
            .catch((e) => {
              this.$message.error(e);
            });
        },3000)
        // 超过1分钟，关闭弹框
        setTimeout(()=> {
          this.isError = true
          clearInterval(timer);
          console.log("超过1分钟，暂不关闭弹框")
          // setTimeout(()=>{
          //   this.updateVisible(false)
          // },500)
        }, 60000)
      },
      /* 更新 visible */
      updateVisible(value) {
          this.visible=value
        this.isSuccess = false
        this.isError = false
          this.codeImg=''
      },
    }
  }
</script>

<style scoped lang="less">
  .code-cls{
    min-height: 220px;
    display: flex;
    align-items: center;
    flex-direction: column;
    padding: 30px 0;
    .title{
      height: 38px;
      font-size: 18px;
      color: #000;
    }

    .v-be-overdue {
      top:68px;
      cursor: pointer;
      position: absolute;
      width: 180px;
      height: 180px;
      background-color: #fff;
      opacity: .96;
      align-items: center;
      display: flex;
      flex-direction: column;
      i{
        font-size: 24px;
        margin-bottom: 12px;
      }
      view {
        color: rgba(23,26,28,.65);
        font-size: 14px;
        margin-top: 4px;
      }
    }
  }
</style>
